<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Awesome-pyecharts</title>
            <script type="text/javascript" src="https://assets.pyecharts.org/assets/echarts.min.js"></script>


</head>
<body>
<style>
    .tab {
        overflow: hidden;
        border: 1px solid #ccc;
        background-color: #f1f1f1;
    }

    .tab button {
        background-color: inherit;
        float: left;
        border: none;
        outline: none;
        cursor: pointer;
        padding: 12px 16px;
        transition: 0.3s;
    }

    .tab button:hover {
        background-color: #ddd;
    }

    .tab button.active {
        background-color: #ccc;
    }

    .chart-container {
        display: none;
        padding: 6px 12px;
        border-top: none;
    }
</style>
<div class="tab">
    <button class="tablinks" onclick="showChart(event, 'd952b72ba04149ea846d09afe98080c2')">Anger</button>
    <button class="tablinks" onclick="showChart(event, '36f216c4766f4f98a1f0cd66fd29a78c')">Disgust</button>
    <button class="tablinks" onclick="showChart(event, '8cdd9444feb9420d99aeb09022e290ce')">Fear</button>
    <button class="tablinks" onclick="showChart(event, '0163321919cd46f29a1dcf829670c585')">Joy</button>
    <button class="tablinks" onclick="showChart(event, '1eb9ab8b90b54754ba28202ab07e3238')">Sadness</button>
</div>

<div class="box">
    <div id="d952b72ba04149ea846d09afe98080c2" class="chart-container" style="width:900px; height:500px;"></div>
    <script>
        var chart_d952b72ba04149ea846d09afe98080c2 = echarts.init(
            document.getElementById('d952b72ba04149ea846d09afe98080c2'), 'white', {renderer: 'canvas'});
        var option_d952b72ba04149ea846d09afe98080c2 = {
            "animation": true,
            "animationThreshold": 2000,
            "animationDuration": 1000,
            "animationEasing": "cubicOut",
            "animationDelay": 0,
            "animationDurationUpdate": 300,
            "animationEasingUpdate": "cubicOut",
            "animationDelayUpdate": 0,
            "color": [
                "#c23531",
        "#2f4554",
        "#61a0a8",
        "#d48265",
        "#749f83",
        "#ca8622",
        "#bda29a",
        "#6e7074",
        "#546570",
        "#c4ccd3",
        "#f05b72",
        "#ef5b9c",
        "#f47920",
        "#905a3d",
        "#fab27b",
        "#2a5caa",
        "#444693",
        "#726930",
        "#b2d235",
        "#6d8346",
        "#ac6767",
        "#1d953f",
        "#6950a1",
        "#918597"
    ],
    "series": [
        {
            "type": "bar",
            "name": "Anger",
            "legendHoverLink": true,
            "data": [
                0.040403873665676236,
                0.10034364261168385,
                0.05862068965517241,
                0.07598039215686275,
                0.05263157894736842,
                0.060810810810810814,
                0.06676798378926038,
                0.10091743119266056,
                0.07246376811594202,
                0.05100143061516451,
                0.04369602763385147,
                0.0633862433862434,
                0.05999813510406732,
                0.07916991933385377,
                0.07656352485897941,
                0.05812676668841052,
                0.04734469919655104,
                0.04096668710402617,
                0.030214659441278147,
                0.04977553310886644,
                0.07273583484026522,
                0.05830832757191086,
                0.035363215866360515,
                0.05390960079181787
            ],
            "showBackground": false,
            "barMinHeight": 0,
            "barCategoryGap": "20%",
            "barGap": "30%",
            "large": false,
            "largeThreshold": 400,
            "seriesLayoutBy": "column",
            "datasetIndex": 0,
            "clip": true,
            "zlevel": 0,
            "z": 2,
            "label": {
                "show": false,
                "position": "top",
                "margin": 8
            },
            "rippleEffect": {
                "show": true,
                "brushType": "stroke",
                "scale": 2.5,
                "period": 4
            }
        }
    ],
            "legend": [
                {
                    "data": [
                        "Anger"
                    ],
                    "selected": {
                        "Anger": true
                    },
                    "show": true,
                    "padding": 5,
                    "itemGap": 10,
                    "itemWidth": 25,
                    "itemHeight": 14
                }
            ],
            "tooltip": {
                "show": false,
                "trigger": "item",
                "triggerOn": "mousemove|click",
                "axisPointer": {
                    "type": "line"
                },
                "showContent": true,
                "alwaysShowContent": false,
                "showDelay": 0,
                "hideDelay": 100,
                "textStyle": {
                    "fontSize": 14
                },
                "borderWidth": 0,
                "padding": 5
            },
            "xAxis": [
                {
                    "show": true,
                    "scale": false,
                    "nameLocation": "end",
                    "nameGap": 15,
                    "gridIndex": 0,
                    "inverse": false,
                    "offset": 0,
                    "splitNumber": 5,
                    "minInterval": 0,
                    "splitLine": {
                        "show": false,
                        "lineStyle": {
                            "show": true,
                            "width": 1,
                            "opacity": 1,
                            "curveness": 0,
                            "type": "solid"
                        }
                    },
                    "data": [
                        "00",
                        "01",
                        "02",
                        "03",
                        "04",
                        "05",
                        "06",
                        "07",
                        "08",
                        "09",
                        "10",
                        "11",
                        "12",
                        "13",
                        "14",
                        "15",
                        "16",
                        "17",
                        "18",
                        "19",
                        "20",
                        "21",
                        "22",
                        "23"
                    ]
                }
            ],
            "yAxis": [
                {
                    "type": "value",
                    "show": true,
                    "scale": false,
                    "nameLocation": "end",
                    "nameGap": 15,
                    "gridIndex": 0,
                    "axisTick": {
                        "show": true,
                        "alignWithLabel": false,
                        "inside": false
                    },
                    "inverse": false,
                    "offset": 0,
                    "splitNumber": 5,
                    "minInterval": 0,
                    "splitLine": {
                        "show": false,
                        "lineStyle": {
                            "show": true,
                            "width": 1,
                            "opacity": 1,
                            "curveness": 0,
                            "type": "solid"
                        }
                    }
                }
            ],
            "title": [
                {
                    "text": "Anger \u60c5\u7eea-\u65f6\u95f4\u6761\u5f62\u56fe",
                    "padding": 5,
                    "itemGap": 10
                }
            ]
        };
        chart_d952b72ba04149ea846d09afe98080c2.setOption(option_d952b72ba04149ea846d09afe98080c2);
    </script>
    <div id="36f216c4766f4f98a1f0cd66fd29a78c" class="chart-container" style="width:900px; height:500px;"></div>
    <script>
        var chart_36f216c4766f4f98a1f0cd66fd29a78c = echarts.init(
            document.getElementById('36f216c4766f4f98a1f0cd66fd29a78c'), 'white', {renderer: 'canvas'});
        var option_36f216c4766f4f98a1f0cd66fd29a78c = {
            "animation": true,
            "animationThreshold": 2000,
            "animationDuration": 1000,
            "animationEasing": "cubicOut",
            "animationDelay": 0,
            "animationDurationUpdate": 300,
            "animationEasingUpdate": "cubicOut",
            "animationDelayUpdate": 0,
            "color": [
                "#c23531",
                "#2f4554",
                "#61a0a8",
                "#d48265",
                "#749f83",
                "#ca8622",
                "#bda29a",
                "#6e7074",
                "#546570",
                "#c4ccd3",
                "#f05b72",
                "#ef5b9c",
                "#f47920",
                "#905a3d",
                "#fab27b",
                "#2a5caa",
                "#444693",
                "#726930",
                "#b2d235",
                "#6d8346",
                "#ac6767",
                "#1d953f",
                "#6950a1",
                "#918597"
            ],
            "series": [
                {
                    "type": "bar",
                    "name": "Disgust",
                    "legendHoverLink": true,
                    "data": [
                        0.06566523605150215,
                        0.11718213058419244,
                        0.03635057471264368,
                        0.08700980392156864,
                        0.0,
                        0.05405405405405406,
                        0.05354609929078014,
                        0.0382262996941896,
                        0.1057518115942029,
                        0.06599734314326589,
                        0.044944261265504784,
                        0.08613756613756615,
                        0.06441014258810868,
                        0.07919594067135051,
                        0.06525769054178145,
                        0.05993150684931508,
                        0.07505715592135347,
                        0.08262824443081952,
                        0.07911138621570277,
                        0.0567660734327401,
                        0.05917721518987341,
                        0.04378609798457126,
                        0.063181757678613,
                        0.06767935041607097
                    ],
                    "showBackground": false,
                    "barMinHeight": 0,
                    "barCategoryGap": "20%",
                    "barGap": "30%",
                    "large": false,
                    "largeThreshold": 400,
                    "seriesLayoutBy": "column",
                    "datasetIndex": 0,
                    "clip": true,
                    "zlevel": 0,
                    "z": 2,
                    "label": {
                        "show": false,
                        "position": "top",
                        "margin": 8
                    },
                    "rippleEffect": {
                        "show": true,
                        "brushType": "stroke",
                        "scale": 2.5,
                        "period": 4
                    }
                }
            ],
            "legend": [
                {
                    "data": [
                        "Disgust"
                    ],
                    "selected": {
                        "Disgust": true
                    },
                    "show": true,
                    "padding": 5,
                    "itemGap": 10,
                    "itemWidth": 25,
                    "itemHeight": 14
                }
            ],
            "tooltip": {
                "show": false,
                "trigger": "item",
                "triggerOn": "mousemove|click",
                "axisPointer": {
                    "type": "line"
                },
                "showContent": true,
                "alwaysShowContent": false,
                "showDelay": 0,
                "hideDelay": 100,
                "textStyle": {
                    "fontSize": 14
                },
                "borderWidth": 0,
                "padding": 5
            },
            "xAxis": [
                {
                    "show": true,
                    "scale": false,
                    "nameLocation": "end",
                    "nameGap": 15,
                    "gridIndex": 0,
                    "inverse": false,
                    "offset": 0,
                    "splitNumber": 5,
                    "minInterval": 0,
                    "splitLine": {
                        "show": false,
                        "lineStyle": {
                            "show": true,
                            "width": 1,
                            "opacity": 1,
                            "curveness": 0,
                            "type": "solid"
                        }
                    },
                    "data": [
                        "00",
                        "01",
                        "02",
                        "03",
                        "04",
                        "05",
                        "06",
                        "07",
                        "08",
                        "09",
                        "10",
                        "11",
                        "12",
                        "13",
                        "14",
                        "15",
                        "16",
                        "17",
                        "18",
                        "19",
                        "20",
                        "21",
                        "22",
                        "23"
                    ]
                }
            ],
            "yAxis": [
                {
                    "type": "value",
                    "show": true,
                    "scale": false,
                    "nameLocation": "end",
                    "nameGap": 15,
                    "gridIndex": 0,
                    "axisTick": {
                        "show": true,
                        "alignWithLabel": false,
                        "inside": false
                    },
                    "inverse": false,
                    "offset": 0,
                    "splitNumber": 5,
                    "minInterval": 0,
                    "splitLine": {
                        "show": false,
                        "lineStyle": {
                            "show": true,
                            "width": 1,
                            "opacity": 1,
                            "curveness": 0,
                            "type": "solid"
                        }
                    }
                }
            ],
            "title": [
                {
                    "text": "Disgust \u60c5\u7eea-\u65f6\u95f4\u6761\u5f62\u56fe",
                    "padding": 5,
                    "itemGap": 10
                }
            ]
        };
        chart_36f216c4766f4f98a1f0cd66fd29a78c.setOption(option_36f216c4766f4f98a1f0cd66fd29a78c);
    </script>
    <div id="8cdd9444feb9420d99aeb09022e290ce" class="chart-container" style="width:900px; height:500px;"></div>
    <script>
        var chart_8cdd9444feb9420d99aeb09022e290ce = echarts.init(
            document.getElementById('8cdd9444feb9420d99aeb09022e290ce'), 'white', {renderer: 'canvas'});
        var option_8cdd9444feb9420d99aeb09022e290ce = {
            "animation": true,
            "animationThreshold": 2000,
            "animationDuration": 1000,
            "animationEasing": "cubicOut",
            "animationDelay": 0,
            "animationDurationUpdate": 300,
            "animationEasingUpdate": "cubicOut",
            "animationDelayUpdate": 0,
            "color": [
                "#c23531",
                "#2f4554",
                "#61a0a8",
                "#d48265",
                "#749f83",
                "#ca8622",
                "#bda29a",
                "#6e7074",
                "#546570",
                "#c4ccd3",
                "#f05b72",
                "#ef5b9c",
                "#f47920",
                "#905a3d",
                "#fab27b",
                "#2a5caa",
                "#444693",
                "#726930",
                "#b2d235",
                "#6d8346",
                "#ac6767",
                "#1d953f",
                "#6950a1",
                "#918597"
            ],
            "series": [
                {
                    "type": "bar",
                    "name": "Fear",
                    "legendHoverLink": true,
                    "data": [
                        0.020446792120611866,
                        0.022680412371134023,
                        0.005747126436781609,
                        0.04166666666666667,
                        0.0,
                        0.0,
                        0.0367274569402229,
                        0.008715596330275228,
                        0.009057971014492754,
                        0.021566523605150215,
                        0.013261781396496421,
                        0.0316984126984127,
                        0.013269040281752147,
                        0.023224043715846996,
                        0.017424242424242422,
                        0.019533231861998984,
                        0.022085048010973937,
                        0.012732474964234622,
                        0.011330935251798561,
                        0.01043771043771044,
                        0.009629294755877035,
                        0.017458297992649138,
                        0.020265548567435357,
                        0.02176949301660618
                    ],
                    "showBackground": false,
                    "barMinHeight": 0,
                    "barCategoryGap": "20%",
                    "barGap": "30%",
                    "large": false,
                    "largeThreshold": 400,
                    "seriesLayoutBy": "column",
                    "datasetIndex": 0,
                    "clip": true,
                    "zlevel": 0,
                    "z": 2,
                    "label": {
                        "show": false,
                        "position": "top",
                        "margin": 8
                    },
                    "rippleEffect": {
                        "show": true,
                        "brushType": "stroke",
                        "scale": 2.5,
                        "period": 4
                    }
                }
            ],
            "legend": [
                {
                    "data": [
                        "Fear"
                    ],
                    "selected": {
                        "Fear": true
                    },
                    "show": true,
                    "padding": 5,
                    "itemGap": 10,
                    "itemWidth": 25,
                    "itemHeight": 14
                }
            ],
            "tooltip": {
                "show": false,
                "trigger": "item",
                "triggerOn": "mousemove|click",
                "axisPointer": {
                    "type": "line"
                },
                "showContent": true,
                "alwaysShowContent": false,
                "showDelay": 0,
                "hideDelay": 100,
                "textStyle": {
                    "fontSize": 14
                },
                "borderWidth": 0,
                "padding": 5
            },
            "xAxis": [
                {
                    "show": true,
                    "scale": false,
                    "nameLocation": "end",
                    "nameGap": 15,
                    "gridIndex": 0,
                    "inverse": false,
                    "offset": 0,
                    "splitNumber": 5,
                    "minInterval": 0,
                    "splitLine": {
                        "show": false,
                        "lineStyle": {
                            "show": true,
                            "width": 1,
                            "opacity": 1,
                            "curveness": 0,
                            "type": "solid"
                        }
                    },
                    "data": [
                        "00",
                        "01",
                        "02",
                        "03",
                        "04",
                        "05",
                        "06",
                        "07",
                        "08",
                        "09",
                        "10",
                        "11",
                        "12",
                        "13",
                        "14",
                        "15",
                        "16",
                        "17",
                        "18",
                        "19",
                        "20",
                        "21",
                        "22",
                        "23"
                    ]
                }
            ],
            "yAxis": [
                {
                    "type": "value",
                    "show": true,
                    "scale": false,
                    "nameLocation": "end",
                    "nameGap": 15,
                    "gridIndex": 0,
                    "axisTick": {
                        "show": true,
                        "alignWithLabel": false,
                        "inside": false
                    },
                    "inverse": false,
                    "offset": 0,
                    "splitNumber": 5,
                    "minInterval": 0,
                    "splitLine": {
                        "show": false,
                        "lineStyle": {
                            "show": true,
                            "width": 1,
                            "opacity": 1,
                            "curveness": 0,
                            "type": "solid"
                        }
                    }
                }
            ],
            "title": [
                {
                    "text": "Fear \u60c5\u7eea-\u65f6\u95f4\u6761\u5f62\u56fe",
                    "padding": 5,
                    "itemGap": 10
                }
            ]
        };
        chart_8cdd9444feb9420d99aeb09022e290ce.setOption(option_8cdd9444feb9420d99aeb09022e290ce);
    </script>
    <div id="0163321919cd46f29a1dcf829670c585" class="chart-container" style="width:900px; height:500px;"></div>
    <script>
        var chart_0163321919cd46f29a1dcf829670c585 = echarts.init(
            document.getElementById('0163321919cd46f29a1dcf829670c585'), 'white', {renderer: 'canvas'});
        var option_0163321919cd46f29a1dcf829670c585 = {
            "animation": true,
            "animationThreshold": 2000,
            "animationDuration": 1000,
            "animationEasing": "cubicOut",
            "animationDelay": 0,
            "animationDurationUpdate": 300,
            "animationEasingUpdate": "cubicOut",
            "animationDelayUpdate": 0,
            "color": [
                "#c23531",
                "#2f4554",
                "#61a0a8",
                "#d48265",
                "#749f83",
                "#ca8622",
                "#bda29a",
                "#6e7074",
                "#546570",
                "#c4ccd3",
                "#f05b72",
                "#ef5b9c",
                "#f47920",
                "#905a3d",
                "#fab27b",
                "#2a5caa",
                "#444693",
                "#726930",
                "#b2d235",
                "#6d8346",
                "#ac6767",
                "#1d953f",
                "#6950a1",
                "#918597"
            ],
            "series": [
                {
                    "type": "bar",
                    "name": "Joy",
                    "legendHoverLink": true,
                    "data": [
                        0.3950845530244671,
                        0.25189003436426116,
                        0.3633620689655172,
                        0.2833333333333333,
                        0.3157894736842105,
                        0.24594594594594593,
                        0.29630192502532926,
                        0.3819571865443425,
                        0.2927406832298136,
                        0.30946760678520346,
                        0.3939528519839401,
                        0.32713227513227516,
                        0.29323547215496365,
                        0.36925578974759304,
                        0.3370230306309852,
                        0.36050047111690947,
                        0.3859853680841333,
                        0.3617310443490701,
                        0.3504617085552338,
                        0.33319972208861093,
                        0.3458936106088004,
                        0.3476652577909874,
                        0.35453645469368744,
                        0.3907263829319257
                    ],
                    "showBackground": false,
                    "barMinHeight": 0,
                    "barCategoryGap": "20%",
                    "barGap": "30%",
                    "large": false,
                    "largeThreshold": 400,
                    "seriesLayoutBy": "column",
                    "datasetIndex": 0,
                    "clip": true,
                    "zlevel": 0,
                    "z": 2,
                    "label": {
                        "show": false,
                        "position": "top",
                        "margin": 8
                    },
                    "rippleEffect": {
                        "show": true,
                        "brushType": "stroke",
                        "scale": 2.5,
                        "period": 4
                    }
                }
            ],
            "legend": [
                {
                    "data": [
                        "Joy"
                    ],
                    "selected": {
                        "Joy": true
                    },
                    "show": true,
                    "padding": 5,
                    "itemGap": 10,
                    "itemWidth": 25,
                    "itemHeight": 14
                }
            ],
            "tooltip": {
                "show": false,
                "trigger": "item",
                "triggerOn": "mousemove|click",
                "axisPointer": {
                    "type": "line"
                },
                "showContent": true,
                "alwaysShowContent": false,
                "showDelay": 0,
                "hideDelay": 100,
                "textStyle": {
                    "fontSize": 14
                },
                "borderWidth": 0,
                "padding": 5
            },
            "xAxis": [
                {
                    "show": true,
                    "scale": false,
                    "nameLocation": "end",
                    "nameGap": 15,
                    "gridIndex": 0,
                    "inverse": false,
                    "offset": 0,
                    "splitNumber": 5,
                    "minInterval": 0,
                    "splitLine": {
                        "show": false,
                        "lineStyle": {
                            "show": true,
                            "width": 1,
                            "opacity": 1,
                            "curveness": 0,
                            "type": "solid"
                        }
                    },
                    "data": [
                        "00",
                        "01",
                        "02",
                        "03",
                        "04",
                        "05",
                        "06",
                        "07",
                        "08",
                        "09",
                        "10",
                        "11",
                        "12",
                        "13",
                        "14",
                        "15",
                        "16",
                        "17",
                        "18",
                        "19",
                        "20",
                        "21",
                        "22",
                        "23"
                    ]
                }
            ],
            "yAxis": [
                {
                    "type": "value",
                    "show": true,
                    "scale": false,
                    "nameLocation": "end",
                    "nameGap": 15,
                    "gridIndex": 0,
                    "axisTick": {
                        "show": true,
                        "alignWithLabel": false,
                        "inside": false
                    },
                    "inverse": false,
                    "offset": 0,
                    "splitNumber": 5,
                    "minInterval": 0,
                    "splitLine": {
                        "show": false,
                        "lineStyle": {
                            "show": true,
                            "width": 1,
                            "opacity": 1,
                            "curveness": 0,
                            "type": "solid"
                        }
                    }
                }
            ],
            "title": [
                {
                    "text": "Joy \u60c5\u7eea-\u65f6\u95f4\u6761\u5f62\u56fe",
                    "padding": 5,
                    "itemGap": 10
                }
            ]
        };
        chart_0163321919cd46f29a1dcf829670c585.setOption(option_0163321919cd46f29a1dcf829670c585);
    </script>
    <div id="1eb9ab8b90b54754ba28202ab07e3238" class="chart-container" style="width:900px; height:500px;"></div>
    <script>
        var chart_1eb9ab8b90b54754ba28202ab07e3238 = echarts.init(
            document.getElementById('1eb9ab8b90b54754ba28202ab07e3238'), 'white', {renderer: 'canvas'});
        var option_1eb9ab8b90b54754ba28202ab07e3238 = {
            "animation": true,
            "animationThreshold": 2000,
            "animationDuration": 1000,
            "animationEasing": "cubicOut",
            "animationDelay": 0,
            "animationDurationUpdate": 300,
            "animationEasingUpdate": "cubicOut",
            "animationDelayUpdate": 0,
            "color": [
                "#c23531",
                "#2f4554",
                "#61a0a8",
                "#d48265",
                "#749f83",
                "#ca8622",
                "#bda29a",
                "#6e7074",
                "#546570",
                "#c4ccd3",
                "#f05b72",
                "#ef5b9c",
                "#f47920",
                "#905a3d",
                "#fab27b",
                "#2a5caa",
                "#444693",
                "#726930",
                "#b2d235",
                "#6d8346",
                "#ac6767",
                "#1d953f",
                "#6950a1",
                "#918597"
            ],
            "series": [
                {
                    "type": "bar",
                    "name": "Sadness",
                    "legendHoverLink": true,
                    "data": [
                        0.16080297861413737,
                        0.17800687285223366,
                        0.1738505747126437,
                        0.12965686274509802,
                        0.10526315789473684,
                        0.09864864864864864,
                        0.1743161094224924,
                        0.13073394495412843,
                        0.13411620082815737,
                        0.16570100143061514,
                        0.14145077720207255,
                        0.1583121693121693,
                        0.10722280309144713,
                        0.10489201144938849,
                        0.15714060245310243,
                        0.1548760600130463,
                        0.11973349010386047,
                        0.14571837318618433,
                        0.1260036126942602,
                        0.12894554005665118,
                        0.1423108800482218,
                        0.12820186598812555,
                        0.14719809656916583,
                        0.16799369478353318
                    ],
                    "showBackground": false,
                    "barMinHeight": 0,
                    "barCategoryGap": "20%",
                    "barGap": "30%",
                    "large": false,
                    "largeThreshold": 400,
                    "seriesLayoutBy": "column",
                    "datasetIndex": 0,
                    "clip": true,
                    "zlevel": 0,
                    "z": 2,
                    "label": {
                        "show": false,
                        "position": "top",
                        "margin": 8
                    },
                    "rippleEffect": {
                        "show": true,
                        "brushType": "stroke",
                        "scale": 2.5,
                        "period": 4
                    }
                }
            ],
            "legend": [
                {
                    "data": [
                        "Sadness"
                    ],
                    "selected": {
                        "Sadness": true
                    },
                    "show": true,
                    "padding": 5,
                    "itemGap": 10,
                    "itemWidth": 25,
                    "itemHeight": 14
                }
            ],
            "tooltip": {
                "show": false,
                "trigger": "item",
                "triggerOn": "mousemove|click",
                "axisPointer": {
                    "type": "line"
                },
                "showContent": true,
                "alwaysShowContent": false,
                "showDelay": 0,
                "hideDelay": 100,
                "textStyle": {
                    "fontSize": 14
                },
                "borderWidth": 0,
                "padding": 5
            },
            "xAxis": [
                {
                    "show": true,
                    "scale": false,
                    "nameLocation": "end",
                    "nameGap": 15,
                    "gridIndex": 0,
                    "inverse": false,
                    "offset": 0,
                    "splitNumber": 5,
                    "minInterval": 0,
                    "splitLine": {
                        "show": false,
                        "lineStyle": {
                            "show": true,
                            "width": 1,
                            "opacity": 1,
                            "curveness": 0,
                            "type": "solid"
                        }
                    },
                    "data": [
                        "00",
                        "01",
                        "02",
                        "03",
                        "04",
                        "05",
                        "06",
                        "07",
                        "08",
                        "09",
                        "10",
                        "11",
                        "12",
                        "13",
                        "14",
                        "15",
                        "16",
                        "17",
                        "18",
                        "19",
                        "20",
                        "21",
                        "22",
                        "23"
                    ]
                }
            ],
            "yAxis": [
                {
                    "type": "value",
                    "show": true,
                    "scale": false,
                    "nameLocation": "end",
                    "nameGap": 15,
                    "gridIndex": 0,
                    "axisTick": {
                        "show": true,
                        "alignWithLabel": false,
                        "inside": false
                    },
                    "inverse": false,
                    "offset": 0,
                    "splitNumber": 5,
                    "minInterval": 0,
                    "splitLine": {
                        "show": false,
                        "lineStyle": {
                            "show": true,
                            "width": 1,
                            "opacity": 1,
                            "curveness": 0,
                            "type": "solid"
                        }
                    }
                }
            ],
            "title": [
                {
                    "text": "Sadness \u60c5\u7eea-\u65f6\u95f4\u6761\u5f62\u56fe",
                    "padding": 5,
                    "itemGap": 10
                }
            ]
        };
        chart_1eb9ab8b90b54754ba28202ab07e3238.setOption(option_1eb9ab8b90b54754ba28202ab07e3238);
    </script>
</div>

<script>
</script>
<script>
    (function () {
        containers = document.getElementsByClassName("chart-container");
        if (containers.length > 0) {
            containers[0].style.display = "block";
        }
    })()

    function showChart(evt, chartID) {
        let containers = document.getElementsByClassName("chart-container");
        for (let i = 0; i < containers.length; i++) {
            containers[i].style.display = "none";
        }

        let tablinks = document.getElementsByClassName("tablinks");
        for (let i = 0; i < tablinks.length; i++) {
            tablinks[i].className = "tablinks";
        }

        document.getElementById(chartID).style.display = "block";
        evt.currentTarget.className += " active";
    }
</script>
</body>
</html>
